<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css">
    <script src="../static/layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<div style="margin-top: 20px; margin-left: 50px;">
    <div class="layui-inline tp">
        <div class="layui-form-item" style="margin-left: -110px;">
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入姓名"
                       autocomplete="off" class="layui-input" id="name_search">
            </div>
        </div>
    </div>
    <div class="layui-inline tp">
        <div class="layui-form-item">
            <button id="search_user" class="layui-btn layui-btn-normal">搜 索</button>
            <button id="addBtn" class="layui-btn layui-btn-danger">新 增</button>
        </div>
    </div>
</div>
<div id="table_show" lay-filter="show_table">
</div>
<div id="addFrm" style="display: none;">
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="uname">用户名</label>
            <div class="layui-input-block">
                <input style="width: 250px;" id="uname" type="text" name="title" required lay-verify="required"
                       placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="uname">密 码</label>
            <div class="layui-input-block">
                <input style="width: 250px;" id="password" type="password" name="title" required lay-verify="required"
                       placeholder="请输入用密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="uemail">邮 箱</label>
            <div class="layui-input-block">
                <input style="width: 250px;" id="uemail" type="text" name="title" required lay-verify="required"
                       placeholder="请输入邮箱"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="content">简 介</label>
            <div class="layui-input-block">
                <textarea style="width: 250px;height: 200px;" id="content" type="text" name="title" required
                          lay-verify="required"
                          placeholder="请输入简介"
                          autocomplete="off" class="layui-input"></textarea>
            </div>
        </div>
    </div>
</div>
<div id="editorFrm" style="display: none;">
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="e_uname">用户名</label>
            <div class="layui-input-block">
                <input style="width: 250px;" id="e_uname" type="text" name="title" required lay-verify="required"
                       placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="e_password">密 码</label>
            <div class="layui-input-block">
                <input style="width: 250px;" id="e_password" type="password" name="title" required lay-verify="required"
                       placeholder="请输入用密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="e_uemail">邮 箱</label>
            <div class="layui-input-block">
                <input style="width: 250px;" id="e_uemail" type="text" name="title" required lay-verify="required"
                       placeholder="请输入邮箱"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" for="e_content">简 介</label>
            <div class="layui-input-block">
                <textarea style="width: 250px;height: 200px;" id="e_content" type="text" name="title" required
                          lay-verify="required"
                          placeholder="请输入简介"
                          autocomplete="off" class="layui-input"></textarea>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="operator">
    <!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>-->
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="del">删 除</button>
    <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="upd">修 改</button>
    <!--    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>-->
</script>
<script>
    layui.use(["table", "jquery", "layer"], function () {
        let $ = layui.jquery,
            table = layui.table,
            layer = layui.layer;

        function getParam() {
            let user_name = $("#name_search").val()
            return {
                "username": user_name
            }
        }

        tableRender(null);

        $("#search_user").click(function () {
            let param = getParam();
            tableRender(param);
        })

        function tableRender(param) {
            table.render({
                elem: "#table_show",
                method: "post",
                url: "/api/user/get",
                where: param,
                page: true,
                limit: 5,
                limits: [5, 10, 20, 30],
                cols: [[
                    {
                        field: "id",
                        title: "编 号",
                        align: "center",
                        width: 200,
                        style: 'background-color:white;color:gray;opacity:0.9;'
                    },
                    {
                        field: "uname",
                        title: "姓 名",
                        align: "center",
                        width: 200,
                        style: 'background-color:white;color:gray;opacity:0.9;'
                    },
                    {
                        field: "uemail",
                        title: "邮 箱",
                        align: "center",
                        width: 200,
                        style: 'background-color:white;color:gray;opacity:0.9;'
                    },
                    {
                        field: "content",
                        title: "简 介",
                        align: "center",
                        width: 200,
                        style: 'background-color:white;color:gray;opacity:0.9;'
                    },
                    {
                        field: "create_time",
                        title: "创建时间",
                        align: "center",
                        width: 200,
                        style: 'background-color:white;color:gray;opacity:0.9;'
                    },
                    {
                        title: "操 作",
                        toolbar: "#operator",
                        align: "center",
                        style: 'background-color:white;color:gray;opacity:0.9;'
                    }
                ]]
            })
        }


        $("#addBtn").click(function () {
            let idx = layer.open({
                type: 1,
                title: "新增人员信息",
                content: $("#addFrm"),
                area: ['400px', '550px'],
                btn: ["确定", "取消"],
                yes: function (index, layero) {
                    let uname = $("#uname").val();
                    let email = $("#uemail").val();
                    let content = $("#content").val();
                    let pwd = $("#password").val();
                    let param = {
                        "uname": uname,
                        "email": email,
                        "content": content,
                        "password": pwd
                    }
                    $.post("/api/user/add", param, function (res) {
                        if (res.code === 200) {
                            layer.close(idx);
                            layer.msg(res.msg, {icon: 6, time: 1000}, function () {
                                tableRender(null);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1000}, function () {
                            });
                        }
                    })
                },
                btn2: function (index, layer) {

                },
                success: function () {

                }
            })
        })

        table.on('tool(show_table)', function (obj) {
            let row_data = obj.data;
            let content = row_data["content"]
            let uname = row_data["uname"]
            let u_email = row_data["uemail"]
            let u_pwd = row_data["upwd"]
            let uid = row_data["id"]
            if (obj.event === 'del') {
                layer.confirm('你确定要删除？',
                    {
                        btn: ['确 定', '取 消'] //可以无限个按钮
                        // ,
                        // btn3: function (index, layero) {
                        //     //按钮【按钮三】的回调
                        // }
                    },
                    function (index, layero) {
                        //按钮【按钮一】的回调
                        $.post("/api/user/del", row_data, function (res) {
                            if (res.code === 200) {
                                layer.msg(res.msg, {icon: 6, time: 3000}, function () {
                                    tableRender(null);
                                });
                            } else {
                                layer.msg(res.msg, {icon: 2, time: 3000}, function () {
                                });
                            }
                        })
                    }, function (index) {
                        //按钮【按钮二】的回调
                    });
            }
            if (obj.event === 'upd') {
                let open_index = layer.open({
                    type: 1,
                    content: $('#editorFrm'),
                    title: '修改用户信息',
                    area: ['400px', '550px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layerout) {
                        let uname = $("#u_uname").val();
                        let email = $("#u_uemail").val();
                        let content = $("#u_content").val();
                        let pwd = $("#u_password").val();
                        let param = {
                            "uname": uname,
                            "email": email,
                            "content": content,
                            "password": pwd,
                            "id": uid
                        }
                        $.post("/api/user/update", param, function (res) {
                            if (res.code === 200) {
                                layer.close(open_index);
                                layer.msg(res.msg, {icon: 6, time: 1000}, function () {
                                    tableRender(null);
                                });
                            } else {
                                layer.msg(res.msg, {icon: 2, time: 1000}, function () {
                                });
                            }
                        })
                    },
                    btn2: function (index, layer) {

                    },
                    success: function () {
                        $("#e_content").val(content);
                        $("#e_password").val(u_pwd);
                        $("#e_uname").val(uname);
                        $("#e_uemail").val(u_email);
                    }
                })
            }
        })
    })
</script>
</html>